<template>
  <grimm-page title="Noticebar">
    <div slot="content" class="content">
      <section>
        <h1 class="example-page-title">overflowMode - 定义当内容超出时，超出部分如何显示</h1>
        <grimm-radio-group class="radio-group" v-model="overflowMode" :options="radioOptions" />
      </section>

      <section>
        <h1 class="example-page-title">speed - 定义autoMoving自动滚动时的速度：</h1>
        <grimm-input v-model="speed" class="grimm-tool-bar-margin" />
      </section>
      <section>
        <h1 class="example-page-title">isShowInfoIcon - 是否显示左侧图标</h1>
        <grimm-switch
          v-model="checked1"
          :name="switch1.value"
          :onChangeAfter="toggleShowInfo"
        >show info icon</grimm-switch>
      </section>

      <section>
        <h1 class="example-page-title">isShowRightIcon - 是否显示右侧图标</h1>
        <grimm-switch
          v-model="checked2"
          :name="switch2.value"
          :onChangeAfter="toggleShowRight"
        >show right icon</grimm-switch>
      </section>

      <grimm-noticebar
        :content="content"
        :overflowMode="overflowMode"
        :isShowInfoIcon="isShowInfoIcon"
        :isShowRightIcon="isShowRightIcon"
        :speed="speed"
      />
    </div>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';

export default {
  components: {
    GrimmPage,
  },
  data() {
    return {
      content: '呼叫01，呼叫01，呼叫01，收到请回答！收到请回答！',
      overflowMode: '',
      speed: 5,
      radioOptions: [
        {
          label: 'default',
          value: '',
        },
        {
          label: 'scroll',
          value: 'scroll',
        },
        {
          label: 'hidden',
          value: 'hidden',
        },
        {
          label: 'ellipsis',
          value: 'ellipsis',
        },
        {
          label: 'showMore',
          value: 'showMore',
        },
        {
          label: 'autoMoving',
          value: 'autoMoving',
        },
      ],
      checked1: '1',
      checked2: '1',
      switch1: {
        label: 'Option Checkbox',
        value: '1',
      },
      switch2: {
        label: 'Option Checkbox',
        value: '1',
      },
      isShowInfoIcon: true,
      isShowRightIcon: true,
    };
  },
  mounted() {},
  methods: {
    toggleShowInfo(vals) {
      this.isShowInfoIcon = vals === '1';
    },
    toggleShowRight(vals) {
      this.isShowRightIcon = vals === '1';
    },
  },
};
</script>
<style lang="stylus" >
section {
  margin: 10px 0 30px;
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;
}

.title {
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
}
.grimm-tool-bar-margin{
  margin: 10px 0;
  height: 30px;
}
</style>

